<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
    <title>View UI Plus example</title>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/view-ui-plus/dist/styles/viewuiplus.css">
    <script type="text/javascript" src="https://unpkg.com/vue@next"></script>
    <script type="text/javascript" src="https://unpkg.com/view-ui-plus"></script>
    <script src="/jeecg-boot/js/jquery-1.8.3.min.js"></script>
</head>
<body style="background: rgb(238, 238, 238)">
<div id="app" style="display: flex;flex-direction: column;align-items: center;">
    <div style="background:#eee;padding: 20px">

        <Tabs :value="index" @on-click="tabclick" style="max-width: 770px;width: calc(100vw - 40px)">
            <tab-pane label="图像生成" name="name1">
                <div style="max-width: 770px;width: calc(100vw - 40px)">
                    <img  :src="item" v-for="item in content"/>
                </div>
            </tab-pane>
            <tab-pane label="图像编辑" name="name2">
                <div class="demo-upload-list" v-for="item in uploadList">
                    <template v-if="item.status === 'finished'">
                        <Image :src="item.url" fit="cover" width="100%" height="100%" />
                        <div class="demo-upload-list-cover">
                            <Icon type="ios-eye-outline" @click="handleView(item.name)"></Icon>
                            <Icon type="ios-trash-outline" @click="handleRemove(item)"></Icon>
                        </div>
                    </template>
                    <template v-else>
                        <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                    </template>
                </div>
                <Upload
                        ref="upload"
                        :show-upload-list="false"
                        :default-file-list="defaultList"
                        :on-success="handleSuccess"
                        :format="['jpg','jpeg','png','webp']"
                        :max-size="2048"
                        :on-format-error="handleFormatError"
                        :on-exceeded-size="handleMaxSize"
                        multiple
                        type="drag"
                        action="/jeecg-boot/sys/common/upload"
                        style="display: inline-block;width:58px;">
                    <div style="width: 58px;height:58px;line-height: 58px;">
                        <Icon type="ios-camera" size="20"></Icon>
                    </div>
                </Upload>
            </tab-pane>
<#--            <TabPane label="标签三" name="name3">标签三的内容</TabPane>-->
        </Tabs>
        <Card style="margin-top:10px;max-width: 770px;width: calc(100vw - 40px)">
            <div>
                <i-input @keydown.enter="commit" v-model="inputText" maxlength="500" show-word-limit type="textarea" placeholder="发挥你的想象..." style="width: 100%" />
            </div>
            <i-button type="success" long style="margin-top: 5px;" @click="commit">SUBMIT</i-button>
        </Card>
    </div>
</div>
<script>
    const app = Vue.createApp({
        data () {
            return {
                inputText:'',
                visible: false,
                content:[],
                index:'name1',
                uploadList:[],
                defaultList: [
                    {
                        'name': 'image-demo-1.jpg',
                        'url': 'https://file.iviewui.com/images/image-demo-1.jpg'
                    },
                    {
                        'name': 'image-demo-2.jpg',
                        'url': 'https://file.iviewui.com/images/image-demo-2.jpg'
                    }
                ],
                loading:false,
            }
        },
        methods: {
            handleScrollBottom() {
                this.$nextTick(() => {
                    let scrollElem = this.$refs.chatbody;
                    scrollElem.scrollTo({ top: scrollElem .scrollHeight, behavior: 'smooth' });
                });
            },
            tabclick(name){
                this.index = name;
            },
            commit(){
                if(this.index=='name1'){
                    this.handleScrollBottom();
                    var that = this;
                    this.loading = true;
                    $.ajax({
                        type : "POST",

                        url : "/jeecg-boot/view/openAi/simpleCreateImg",

                        data : JSON.stringify({input:this.inputText}),

                        contentType : "application/json",

                        dataType : "json",

                        complete:function(msg) {
                            that.loading = false;
                            var rp = JSON.parse(msg.responseText);
                            if(rp.success){
                                rp.result.forEach(i=>{
                                    that.content.push(i);
                                })
                                that.$nextTick(()=>{
                                    that.handleScrollBottom()
                                })
                            }
                        }

                    });

                }else{
                    if(this.uploadList.length!=2){
                        alert("必须是两张图片");
                    }else{
                        this.loading = true;
                        $.ajax({
                            type : "POST",

                            url : "/jeecg-boot/view/openAi/editImg",

                            data : JSON.stringify({img1:this.uploadList[0].name,img2:this.uploadList[1].name,input:this.inputText}),

                            contentType : "application/json",

                            dataType : "json",

                            complete:function(msg) {
                                that.loading = false;
                                var rp = JSON.parse(msg.responseText);
                                if(rp.success){
                                    rp.result.forEach(i=>{
                                        that.content.push(i);
                                    })
                                    that.$nextTick(()=>{
                                        that.handleScrollBottom()
                                    })
                                }
                            }

                        });
                    }
                }

                this.inputText = '';

            },
            handleView (name) {
                this.imgName = name;
                this.visible = true;
            },
            handleRemove (file) {
                const fileList = this.uploadList;
                this.uploadList.splice(fileList.indexOf(file), 1);
            },
            handleSuccess (res, file) {
                file.url = 'https://file.iviewui.com/images/image-demo-3.jpg';
                file.name = 'image-demo-3.jpg';
                console.debug(res);
                this.uploadList.push({url:"/jeecg-boot/"+res.message,name:res.message,status:'finished'})
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: 'The file format is incorrect',
                    desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: 'Exceeding file size limit',
                    desc: 'File  ' + file.name + ' is too large, no more than 2M.'
                });
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: 'Up to five pictures can be uploaded.'
                    });
                }
                return check;
            }
        }
    });
    app.use(ViewUIPlus);
    app.mount("#app");
</script>
</body>

<style>
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
</html>

